<script setup lang="ts">
import type { CSSProperties } from 'vue'
import { useLayoutState } from '../../basic-layout/context'
import Menu from '../menu/index.vue'

const {
  collapsed,
  leftCollapsed,
  handleCollapsed,
  selectedMenus,
  splitMenus,
  layout,
  logo,
  theme,
  title,
  collapsedWidth,
  siderWidth,
  fixedSider,
  isMobile,
} = useLayoutState()

const prefixCls = shallowRef('ant-pro-sider')
const siderStyle = computed<CSSProperties>(() => {
  const style: CSSProperties = {
    paddingTop: '0px', // 与顶部对齐，无空隙
    transition:
        'background-color 0.3s ease 0s, min-width 0.3s ease 0s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s',
    overflow: 'hidden',
  }
  return style
})

const cls = computed(() => ({
  [prefixCls.value]: true,
  [`${prefixCls.value}-fixed`]: fixedSider.value,
  [`${prefixCls.value}-layout-${layout.value}`]: !!layout.value,
}))

const showLogo = computed(() => {
  return (layout.value === 'side' || isMobile.value) && layout.value !== 'mix'
})

const logoCls = computed(() => {
  return {
    'ant-pro-sider-collapsed': collapsed.value && !isMobile.value,
    'ant-pro-sider-logo-dark': theme.value === 'inverted',
  }
})
</script>

<template>
  <div
    v-if="fixedSider"
    :style="{
      width: collapsed ? `${collapsedWidth}px` : `${siderWidth}px`,
      maxWidth: collapsed ? `${collapsedWidth}px` : `${siderWidth}px`,
      minWidth: collapsed ? `${collapsedWidth}px` : `${siderWidth}px`,
      ...siderStyle,
    }"
  />

  <!-- 调节侧栏样式 START -->
  <a-layout-sider
    v-if="splitMenus ? (selectedMenus ?? []).length > 0 : true"
    style="margin-left:0;
      margin-top:0;
      margin-bottom: 0;
      height:100vh;
      border:none;
      box-shadow: none;

      "
    :theme="theme === 'inverted' ? 'dark' : 'light'"
    :collapsed="collapsed && !isMobile"
    :trigger="null"
    :collapsed-width="collapsedWidth"
    :width="siderWidth"
    collapsible
    :class="cls"
    :style="siderStyle"
  >
    <!-- 展示侧栏 logo  -->
    <div v-if="showLogo" class="ant-pro-sider-logo" :class="logoCls">
      <a>
        <img :src="logo" alt="logo">
        <h1 v-if="!collapsed || isMobile">{{ title }} </h1>
      </a>
    </div>
    <!-- 展示侧栏 Logo END -->

    <!-- 展示子侧栏菜单 START -->
    <div class="flex-1 of-x-hidden of-y-auto scrollbar">
      <Menu />
    </div>
    <!-- 展示子侧栏菜单 END -->

    <!-- 收起菜单 组件  START -->
    <div
      v-if="!isMobile && leftCollapsed"
      style="display: none;"
      class="w-100% flex-shrink-0 ant-pro-sider-collapsed-button"
      :class="theme === 'inverted' ? 'ant-pro-sider-collapsed-button-inverted' : ''"
    >
      <!-- 收起菜单 组件样式 START -->
      <a-menu
        style="
      border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px;
      "
        class="ant-pro-sider-menu"
        mode="inline"
        :theme="theme === 'inverted' ? 'dark' : 'light'"
        :selectable="false"
        @click="handleCollapsed?.(!collapsed)"
      >
        <a-menu-item>
          <span
            style="
            color:gray;
            font-size: 14px;
            font-family: '粗体';
            font-weight: 500;
            opacity: 0.7;
            left:3px;
            position: relative;
            top: 0.6px;
            "
          >
            收起菜单
          </span>
          <template #icon>
            <span
              v-if="collapsed"
            >
              <img
                style="
              position: relative;
              top: 5px;
              left: 3px;
              "
                src="@/assets/icons/right_hidden.jpg"
                width="22"
              >
            </span>
            <span
              v-else
            >
              <img
                style="
            position: relative;
            opacity: 0.7;
            top: 0.7px;
            left: 0px;
            "
                src="@/assets/icons/left_hidden.jpg"
                width="16"
              >
            </span>
          </template>
        </a-menu-item>
      </a-menu>
    </div>
  <!-- 收起菜单 组件  END -->
  </a-layout-sider>
  <!-- 调节侧栏样式 END -->
</template>

<style lang="less">
@import './index.less';

// 调整收起菜单按钮内容左移，保持悬停效果完整
.ant-pro-sider-collapsed-button {
  .ant-menu-item {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .ant-menu-title-content {
    position: relative;
    left: -8px;
    display: inline-block;
  }

  .anticon {
    position: relative;
    left: -8px;
  }
  img {
    margin-left: -4px !important;
  }
}
</style>
